<!-- 页面布局 侧边栏 -->
<template>
  <div class="aside" width="200px">
    <el-menu
      :default-active="this.$store.state.menus.editableTabsValue"
      class="el-menu-vertical-demo"
      background-color="#263949"
      text-color="#fdfbf4"
      active-text-color="#FCC584"
    >
      <router-link to="/index">
      <!-- 首页导航按钮 -->
        <el-menu-item index="Index" @click="hanlderSelectClick({name:'Index',title:'首页'})">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </template>
        </el-menu-item>
      </router-link>

      <el-submenu default-active="Index" :index="menu.name" v-for="menu,i in menuList" :key="i">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.title }}</span>
        </template>

        <router-link :to="item.path" v-for="item,i in menu.children" :key="i">
          <el-menu-item :index="item.name" @click="hanlderSelectClick(item)">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </template>
          </el-menu-item>
        </router-link>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "SideMenu",
  },
  data() {
    //这里存放数据
    return {
      //菜单列表 从全局store中拿
      //menuList: this.$store.menus.menuList, 页面渲染完成了，路由还没有加载好，导致无法从store中获取menulist，这时可以使用计算属性
    };
  },
  //监听属性 类似于data概念
  computed: {
    menuList:{
      get(){
        return this.$store.state.menus.menuList
      }
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //导航菜单选项点击事件 item{name:tab标签页跳转的router的name,title:tab标签页的标题}
    hanlderSelectClick(item){
      //调用store中的tabs方法，新增一个导航页tab
      this.$store.commit("addTab",item);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  //3.0版本弃用 beforeDestroy() {}, //生命周期 - 销毁之前
  //3.0版本弃用 destroyed() {}, //生命周期 - 销毁完成
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-menu-vertical-demo {
  /* 设置导航菜单填充整个aside */
  height: 100vh;
}
.aside{
  box-shadow:2px 2px 5px #000;
}
a {
  text-decoration: none;
}
</style>